<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .weui-cells_form {
    background: #fbfbfb;
  }
  .weui-cell {
    background: #fff;
  }
  .weui-cells__title {
    text-align: left;
  }
  .oitem {
    padding: 3px;
  }
  .hide {
    display: none;
  }
  #acts {
    font-size: 0;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label {
    text-align: left;
  }

  .weui_uploader_input_wrp {
    float: left;
    position: relative;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 77px;
    height: 77px;
    border: 1px solid #D9D9D9;
  }
  .weui_uploader_hd {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
  }
  .weui_uploader_files {
    list-style: none;
  }
  .weui_uploader_input_wrp:before {
    width: 2px;
    height: 39.5px;
  }
  .weui_uploader_input_wrp:before, .weui_uploader_input_wrp:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #D9D9D9;
  }
  .weui_uploader_input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .weui_uploader_input_wrp:after {
    width: 39.5px;
    height: 2px;
  }
  .weui_uploader_bd {
    overflow: hidden;
  }
  .weui_cell {
    padding: 10px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
  }
  .examine >>> .weui-uploader_files {
    list-style: none;
    overflow-y: hidden;
  }
  .weui-cell_select {
    padding: 0 15px;
  }


  .weui-panel {
    background: #eee;
  }

  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }

  .weui-panel {
    margin-top: 0;
    text-align: left;
  }

  .hd .weui-grid.js_grid {
    font-weight: 600;
  }

  .weui-grid.js_grid {
    width: 25%;
    padding: 10px 1px;
  }

  /*.weui-grid.fir {*/
  /*  width: 20%;*/
  /*}*/
  /*.weui-grid.sec {*/
  /*  width: 15%;*/
  /*}*/
  /*.weui-grid.thr {*/
  /*  width: 20%;*/
  /*}*/
  /*.weui-grid.fou {*/
  /*  width: 15%;*/
  /*}*/
  /*.weui-grid.fiv {*/
  /*  width: 15%;*/
  /*}*/
  .weui-grid__label {
    text-overflow: initial;
  }
  .section {
    margin: 5px;
    border-radius: 5px;
  }
  .btoms {
    width: 100%;
    position: fixed;
    bottom: 0;
  }

  .weui_uploader_input_wrp.inrow {
    width: 30px;
    height: 30px;
    margin: 0;
  }

  .weui_uploader_input_wrp:before {
    height: 19.5px;
  }

  .weui_uploader_input_wrp:after {
    width: 19.5px;
  }

  .weui-uploader_file.inrow {
    margin: 0;
    width: 40px;
  }

  li.weui-uploader_file {
    display: inline-block;
    padding: 3px 5px;
  }

  ul#images {
    text-align: right;
  }
  .transfer >>> .ui.selection.dropdown {
    border: none;
  }
</style>
<template>
  <div class="transfer"  style="height: 100%;overflow: hidden;">
    <div class="rj-wrap" style="background: #fff;position: static;">
      审批转交
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="tops" style="position: static">
      <div class="weui-cell">
        <div class="weui-cell__hd" style="width: 20%;"><label class="weui-label">审批人</label></div>
        <div class="weui-cell__bd">
          <model-list-select :list="nodes"
                             v-model="node"
                             option-value="userId"
                             option-text="label"
                             placeholder="请选择审批人">
          </model-list-select>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <textarea class="weui-textarea opinion" id="opinion" v-model="opinion" name="opinion" placeholder="请输入转交意见" rows="2"></textarea>
        </div>
      </div>
    </div>
    <div class="btoms">
      <div class="weui-cell fir">
        <div class="weui-cell__hd"><label class="weui-label">附件上传</label></div>
        <div class="weui-cell__ft">
          <div class="weui_uploader_bd">
            <ul class="weui_uploader_files"></ul>
            <div class="weui_uploader_input_wrp inrow">
              <UploadFile3 class="weui_uploader_input" v-on:pushfile="setFile"></UploadFile3>
            </div>
          </div>
        </div>
        <ul class="weui-uploader_files" id="images">
          <!--                  <li class="weui-uploader_file" v-for="(img, index) in filenames" :id="img"  @click=del(img,1) ><img :src="images1.srcStr[index]" width="85" /></li>-->
          <li class="weui-uploader_file" v-for="(fil, index) in filenames" @click=delFile(fil,fileids[index])>
            {{fil}}
          </li>
        </ul>
      </div>
      <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary subbtn" href="javascript:" @click="postForm()">提交</a>
      </div>
    </div>
  </div>
</template>

<script>
  import 'vue-search-select/dist/VueSearchSelect.css'
  import { ModelListSelect } from 'vue-search-select'
  import UploadFile3 from "../common/UploadFile3";

  export default {
  name: 'Transfer',
  data () {
    return {
      submitStat: false,
      openid: localStorage.openid,
      id: '',
      nodeid: '',
      baseInfo: {},
      wxParams: {},
      images: {
        serverId: [],
        srcStr: [],
      },
      nodes: [],
      quitsrtype: '',
      node: '',
      opinion: '',
      flowid: '',
      filenames: [],
      fileids: [],
      navgateUrl: ''
  }
  },
    components: {
      ModelListSelect,
      UploadFile3
    },
  mounted () {
    this.id = this.$route.query.id;
    this.nodeid = this.$route.query.nodeid;
    this.flowid = this.$route.query.flowid;
    this.navgateUrl = this.$route.query.navgateUrl;
    this.getNodes();
  },
  methods: {
    getNodes: async function() {
      let that = this;
      await this.axios({
        method: 'get',
        url: '/prod-api/system/user/getTransmitUserList',

      }).then(response => {
        if (response.data.code == 200) {
          this.nodes = response.data.data.filter(item => {
            return item.userId != localStorage.getItem('userid')
          }).map(item => {
            item.label = item.nickName + '-' + item.phonenumber;
            return item;
          });
        } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
          //不不设置提示
        } else {
          this.toastText('获取审批人数据失败!');
        }
      });
    },
    postForm: function () {
      if (!this.node || this.node == '') {
        this.toastText('请选择审批人');
        return false;
      }
      if (this.submitStat) return;
      //提交状态开始
      this.submitStat = true;
      //显示提交状态
      $.showLoading("正在提交");
      let that = this;
      let postData = {};
      postData.fileIds = that.fileids ? that.fileids.join(',') : '',
      postData.opinion = this.opinion ? this.opinion : '转交';
      postData.taskId = this.nodeid;
      postData.toUserId = this.node;
      this.axios({
        method: 'post',
        url: '/prod-api/transmit',
        params: postData
      }).then((response) => {
        //恢复提交按钮可点击
          this.submitStat = false;
        //关闭提交状态
        $.hideLoading();

        if (response.data.code == 200) {
          this.toastSuccess('转交成功!');
          this.$router.push({path: this.navgateUrl});
        } else if (response.data.msg) {
          this.toastText(response.data.msg);
        } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
          //不不设置提示
        } else {
          this.toastError('系统错误');
        }
      }).catch(function (error) {
        //恢复提交按钮可点击
        this.submitStat = false;
        //关闭提交状态
        $.hideLoading();
        that.toastError('系统错误');
      });
    },
    delFile: function (name, id) {
      let that = this;
      $.confirm('确定要删除？', function () {
        that.axios({
          method: 'post',
          url: '/prod-api/common/delete',
          params: {id: id}
        })
        that.fileids = that.fileids.filter(item => {
          return item != id;
        })
        that.filenames = that.filenames.filter(item => {
          return item != name;
        })
      })
    },
    setFile: function (file) {
      this.filenames.push(file.name);
      this.fileids.push(file.id);
      console.log('filenames：', this.filenames)
    },

}
}
</script>
